<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body class="dpflex flexClo">
    <header></header>
    <main>
        <div class="firstRow">
            <div class="TodayRanking">
                <span class="Todaytext">今日排名</span>
                <span class="number">9</span>
            </div>
            <div class="clock">
                <span class="Todaytext">累积打卡23天</span>
                <button class="todayBtn">今日打卡</button>
            </div>
        </div>
        <div class="SecondRow">
            <div class="motion">
                <span class="motiontext">运动数据</span>
            </div>
            <div class="badge">
                <span class="badgetext">累积运动徽章</span>
                <span class="numbertext">3</span>
            </div>
        </div>
        <div class="train">
            <span class="traintext">课程训练</span>
        </div>
        <div class="outdoors">
            <span class="traintext">户外跑步</span>
        </div>
    </main>
    <footer>
        <div class="home">
            <div class="iconfont icon-shouye" style="font-size: 45px"></div>
            <span>首页</span>
        </div>
        <div class="run">
            <div class="iconfont icon-xindiantu" style="font-size: 45px"></div>
            <span>运动</span>
        </div>
        <div class="my">
            <div class="iconfont icon-wode" style="font-size: 45px"></div>
            <span>我的</span>
        </div>
    </footer>
</body>

</html>